<!--个人信息-->
<template>
  <figure id="personal">
    <div id="myimg"></div>
    <div id="myqr">微信二维码</div>
  </figure>
</template>

<script>
  export default{
    name: 'perinfo'
  }
</script>

<style>
  #personal {
    height: 250px;
    width: 200px;
    margin-left: 16px;
    padding: 5px;
    outline: 1px solid #c7c7c7;
    float: left;
    transform-style: preserve-3d;
    transition: all ease-in-out .5s;
  }

  #personal:hover {
    transform: rotateY(180deg);
  }

  #myimg {
    position: absolute;
    background: url("/static/img/personal.png");
    height: 250px;
    width: 200px;
    backface-visibility: hidden;
  }

  #myqr {
    position: absolute;
    background: url("/static/img/weixin.png") no-repeat 0 50px;
    height: 250px;
    width: 200px;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    font-size: 30px;
    text-align: center;
    font-weight: bold;
    line-height: 50px;
  }
</style>
